<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setCharacterEncoding("UTF-8") ;
%>
<jsp:include page="./common/header.jsp">
    <jsp:param name="title" value="DashBoard 欢迎页"/>
</jsp:include>


<div class="container-fluid">
    <div class="row">
<!-- 左边的导航栏 sidebar-->
        <jsp:include page="./common/sidebar.jsp">
            <jsp:param name="menuId" value="#dashboardMenu"/>
        </jsp:include>
    </div>

<!-- 右边的主体部分 -->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <h2>主区域</h2>

        <div id="divMain" style="width: 600px;height:400px; margin: 0px auto; text-align: center;"></div>

    </main>
</div>
<!--jquery slim 版本-->
<%--<script src="js/jquery.slim.min.js"></script>--%>
<%--<script src="js/bootstrap.bundle.min.js"></script>--%>
<%--<script src="js/feather.min.js"></script>--%>
<%--<script src="js/Chart.min.js"></script>--%>
<%--<script src="js/dashboard.js"></script>--%>
<jsp:include page="./common/footer.jsp"></jsp:include>

<%--<script>--%>
<%--    // 处理菜单的高亮显示问题--%>
<%--    // 当页面加载完成后，立刻执行一个在匿名函数--%>
<%--    $(document).ready(function () {--%>
<%--        console.log('dashbard page read()')--%>
<%--        $('a.nav-link').removeClass("active")--%>
<%--        $('a.dropdown-item').removeClass("active")--%>
<%--        $('#dashboardMenu').addClass("active")--%>
<%--        $('#collapseThree').addClass("collapse")--%>
<%--    });--%>
<%--</script>--%>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<%--<script src="https://echarts.baidu.com/dist/echarts.min.js"></script>--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('divMain'));
    // 绘制图表
    $.get('${pageContext.request.contextPath}/api/servlet/maintenance/report', function (data) {
        myChart.setOption({
            tooltip: {//鼠标移动上的浮动提示框
                trigger: 'item',
                formatter: "{a}:{b}:({d}%)" //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            },
            legend: {//小的图例说明设置
                orient: 'vertical',
                x: 'left',//可设定图例在左、右、居中
                y: 'top',//可设定图例在上、下、居中
                padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                data:['已报修','已分派','已完成']
            },
            series : [
                {
                    name: '设备报修',
                    type: 'pie',    // 设置图表类型为饼图
                    selectedMode: 'single', //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。
                    radius: [0, '70%'], //饼图的半径。数组的第一项是内半径，第二项是外半径
                    label: { //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                        normal: {
                            formatter: '{b}:{c}',
                            position: 'outside' //标签的位置 'inside' 'outside'
                        }
                    },
                    data:data.data_pie
                }
            ]
        })
    }, 'json')
</script>
</body>
</html>